<script setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { handleInvoice } from '@/api/me'
import { useMeStore } from '@/stores/me'

const { currentInvoice } = storeToRefs(useMeStore())

const confirmVisible = ref(false)
const submitStatus = ref(null)

function renderStatus(status) {
  const map = {
    '0': '新申请',
    '1': '已开票',
    '-1': '已驳回',
  }
  return map[status.toString()]
}

function onBeforeSubmit(type) {
  submitStatus.value = type
  confirmVisible.value = true
}

async function onSubmit() {
  try {
    await uni.showLoading({ title: '请稍后' })
    const { success, message } = await handleInvoice({
      fapiaoId: currentInvoice.value.id,
      status: submitStatus.value,
    })
    uni.hideLoading()

    if (!success)
      throw new Error(message)

    await uni.showToast({ title: '操作成功', icon: 'success', duration: 1000 })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: e.message, duration: 2000 })
  }
}
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="查看发票记录" custom-color="#000" left-show placeholder fixed />
    <main class="mt-2 bg-white">
      <nut-config-provider :theme-vars="{ cellColor: '#000', cellAfterBorderBottom: '1px solid #ccc' }">
        <nut-form>
          <nut-form-item label="商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家">
            <text class="text-black">
              {{ currentInvoice.merchantName }}
            </text>
          </nut-form-item>
          <!-- 公司 -->
          <nut-form-item v-if="currentInvoice.type === 1" label="公司名称">
            <text class="text-black">
              {{ currentInvoice.taitou }}
            </text>
          </nut-form-item>
          <nut-form-item v-if="currentInvoice.type === 1" label="税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号">
            <text class="text-black">
              {{ currentInvoice.taxNum }}
            </text>
          </nut-form-item>
          <!-- 个人 -->
          <nut-form-item v-if="currentInvoice.type === 2" label="个人名称">
            <text class="text-black">
              {{ currentInvoice.taitou }}
            </text>
          </nut-form-item>
          <nut-form-item label="金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额">
            <text class="text-black">
              {{ currentInvoice.money }}
            </text>
          </nut-form-item>
          <!-- 公司 -->
          <nut-form-item v-if="currentInvoice.type === 1" label="详细地址">
            <text class="text-black">
              {{ currentInvoice.address }}
            </text>
          </nut-form-item>
          <nut-form-item v-if="currentInvoice.type === 1" label="开户银行">
            <text class="text-black">
              {{ currentInvoice.bankName }}
            </text>
          </nut-form-item>
          <nut-form-item v-if="currentInvoice.type === 1" label="银行账号">
            <text class="text-black">
              {{ currentInvoice.bankAccount }}
            </text>
          </nut-form-item>
          <nut-form-item label="申请时间">
            <text class="text-black">
              {{ currentInvoice.createTime }}
            </text>
          </nut-form-item>
          <nut-form-item label="备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注">
            <text class="text-black">
              {{ currentInvoice.remark }}
            </text>
          </nut-form-item>
          <nut-form-item label="联系电话">
            <text class="text-black">
              {{ currentInvoice.phone }}
            </text>
          </nut-form-item>
          <nut-form-item label="邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱">
            <text class="text-black">
              {{ currentInvoice.email }}
            </text>
          </nut-form-item>
          <nut-form-item label="状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态">
            <text class="text-black">
              {{ renderStatus(currentInvoice.status) }}
            </text>
          </nut-form-item>
        </nut-form>
      </nut-config-provider>
      <view v-if="currentInvoice.status === 0" class="px-19 py-8.5 flex justify-between">
        <view class="w-208">
          <nut-button block type="success" @click="onBeforeSubmit(1)">
            已开票
          </nut-button>
        </view>
        <view class="w-208">
          <nut-button block type="danger" @click="onBeforeSubmit(-1)">
            驳回
          </nut-button>
        </view>
      </view>
    </main>
    <nut-dialog v-model:visible="confirmVisible" content="确认提交吗?" @ok="onSubmit" />
  </view>
</template>

<style scoped>
:deep(.nut-form-item__label) {
  font-weight: 500;
}
</style>
